<template>
	<view class="page">
		<!-- 空状态 -->
		<view class="empty">
			<text class="iconfont icon-notification empty-icon"></text>
			<text class="empty-text">暂无通知</text>
		</view>
		
		<!-- 底部标签栏 -->
		<view class="tabbar">
			<view class="tab-item" @tap="switchTab('/pages/index/index')">
				<text class="iconfont icon-message"></text>
				<text class="tab-label">对话</text>
			</view>
			<view class="tab-item" @tap="switchTab('/pages/discover/discover')">
				<text class="iconfont icon-search"></text>
				<text class="tab-label">发现</text>
			</view>
			<view class="tab-item" @tap="switchTab('/pages/create/create')">
				<text class="iconfont icon-add"></text>
				<text class="tab-label">创建</text>
			</view>
			<view class="tab-item active" @tap="switchTab('/pages/notification/notification')">
				<text class="iconfont icon-notification"></text>
				<text class="tab-label">通知</text>
			</view>
			<view class="tab-item" @tap="switchTab('/pages/my/my')">
				<text class="iconfont icon-user"></text>
				<text class="tab-label">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
	},
	methods: {
		switchTab(url) {
			uni.switchTab({ url })
		}
	}
}
</script>

<style>
.page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #FFFFFF;
}

.status-bar {
	width: 100%;
}

.nav-title {
	font-size: 34rpx;
	font-weight: 500;
	padding: 0 32rpx;
	height: 88rpx;
	line-height: 88rpx;
}

.empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.empty-icon {
	font-size: 120rpx;
	color: #999999;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
}

.tabbar {
	height: 100rpx;
	width: 100%;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	border-top: 1rpx solid #EEEEEE;
	padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #999999;
}

.tab-item.active {
	color: #007AFF;
}

.tab-item .iconfont {
	font-size: 48rpx;
	margin-bottom: 4rpx;
}

.tab-label {
	font-size: 24rpx;
}
</style>